<template>
  <div class="workbench">
    <div class="top flexBetween">
      <div class="flexAround top_content">
        <div class="top_left">
          <img src="@/assets/img/managePeople.png" alt />
        </div>
        <div class="top_right">
          <div>管理人员</div>
          <div>1,234</div>
        </div>
      </div>
      <div class="flexAround top_content">
        <div class="top_left">
          <img src="@/assets/img/laborPeople.png" alt />
        </div>
        <div class="top_right">
          <div>劳务人员</div>
          <div>1,234</div>
        </div>
      </div>
      <div class="flexAround top_content">
        <div class="top_left">
          <img src="@/assets/img/dayAttendence.png" alt />
        </div>
        <div class="top_right">
          <div>今日出勤</div>
          <div>1,234</div>
        </div>
      </div>
      <div class="flexAround top_content">
        <div class="top_left">
          <img src="@/assets/img/totalPay.png" alt />
        </div>
        <div class="top_right">
          <div>工资累计支付</div>
          <div>1,234</div>
        </div>
      </div>
    </div>

    <div class="center flexBetween">
      <div class="center_left">
        <div class="center_title flexBetweenCenter">
          <div class="flexStartCenter">
            <div style="font-size:16px;margin:0 10px;color:#000;">班组工资表上报情况</div>
            <div style="color:#1980ff;background:#E6F7FF;padding:1px 10px;">2020-03</div>
          </div>

          <div style="color:#1980ff">查看详情</div>
        </div>
        <div class="acard">
          <a-card>
            <a-card-grid
              style="width:33.333%;text-align:left;padding:10px 24px;cursor:pointer"
              v-for="(item,index) in teamGroup"
              :key="index"
              :bordered="false"
            >
              <div>
                <div style="color:#000;font-size:15px;margin-bottom:0px;padding:5px 0">{{item.groupName}}</div>
                <div style="margin-bottom:10px">{{item.laborName}}</div>
                <div class="flexBetween">
                  <div
                    class="notreported"
                    :class="{reported:item.reported=='已上报'}"
                  >{{item.reported}}</div>
                  <div v-if="item.time">{{item.time }}</div>
                </div>
              </div>
            </a-card-grid>
          </a-card>
        </div>
      </div>
      <div class="center_right">
        <div class="center_title" style="font-size:16px;border-bottom:1px solid #e8e8e8">待办事项</div>
        <div class="right_content">
          <div
            class="flexBetweenCenter"
            style="border-bottom:1px solid #e8e8e8;padding-bottom:25px;margin-bottom:25px"
          >
            <div class="payState">
              <div>2021-03</div>
              <div>工资支付状态</div>
            </div>
            <div style="font-size:22px;color:#000;width:50px">5/9</div>
            <div class="blue" style="margin-right:30px">查看详情</div>
          </div>
          <div class="flexBetween">
            <div class="register">
              <div>合同未登记</div>
              <div style="font-size:22px;color:#000">24</div>
            </div>
            <div class="register">
              <div>银行卡未登记</div>
              <div style="font-size:22px;color:#000">24</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="echarts">
      <div class="echartsTitle" style="margin-bottom:30px">项目统计</div>
      <div style="margin-bottom:60px">
        <div class="echarts_1_title"  style="margin-bottom:30px">人员进出场</div>
        <div class="echarts_1">
          <Echart :echartObj="echartObj" />
        </div>
      </div>
      <div style="margin-bottom:60px">
        <div class="flexBetween" style="margin-bottom:20px">
          <div class="echarts_1_title"  style="margin-bottom:30px">近10天出勤情况</div>
          <div class="flexBetweenCenter" style="width:35%;padding-right:30px">
            <div class="echarts_1_title">班组出勤排名</div>
            <div>
              <a-radio-group v-model="value" @change="onChange">
                <a-radio-button value="a">今日</a-radio-button>
                <a-radio-button value="b">本月</a-radio-button>
                <a-radio-button value="c">上一月</a-radio-button>
              </a-radio-group>
            </div>
          </div>
        </div>

        <div class="flexBetween">
          <div class="echarts_2">
            <Echart :echartObj="echartObj2" />
          </div>
          <div class="echart2-right">
            <div v-for="(item,index) in attendance" :key="index" class="flexBetweenCenter" style="color:#999;padding:10px 0">
              <div class="flexStartCenter">
                <div class="ranking" :class="{rankTop:item.ranking<=3}"  style="margin-right:30px">{{item.ranking}}</div>
              <div class="name">{{item.name}}</div>
              </div>
              
              <div class="proportion"  style="margin-right:40px">{{item.proportion}}</div>
            </div>
          </div>
        </div>
      </div>

      <div style="padding-bottom:60px">
        <div class="echarts_1_title"  style="margin-bottom:30px">2021年工资支付统计</div>
        <div class="echarts_1">
          <Echart :echartObj="echartObj3" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let monthData = []
for (var i = 0; i < 12; i++) {
  monthData.push(i + 1 + '月')
}
const option = {
  color: ['#76C585', '#59B0E7', '#C4C4C4'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['进场人数', '离场人数', '在场人数']
  },
  grid: {
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: monthData
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '进场人数',
      type: 'bar',
      stack: 'one',
      barWidth: 20,
      label: {
			      normal: {
			          show: true,
			          position: 'top',
			          textStyle: {
			            color: '#76C585'
			          }
			      }
			 },
      data: [-203, -34, -38, 0]
    },
    {
      name: '离场人数',
      type: 'bar',
      stack: 'one',
      barWidth: 20,
      label: {
			      normal: {
			          show: true,
			          position: 'top',
			          textStyle: {
			            color: '#59B0E7'
			          }
			      }
			 },
      data: [0, 218, 206, 26]
    },
    
    {
      name: '在场人数',
      type: 'line',
       label: {
			      normal: {
			          show: true,
			          position: 'top',
			          textStyle: {
			            color: '#c4c4c4'
			          }
			      }
			 },
      data: [0, 170, 338, 364]
    }
  ]
}
const option2 = {
   color: ['#EE6666', '#FAC858'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data: ['管理人员', '劳务人员']
    },
    grid: {
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true
  },
    xAxis: [
        {
            type: 'category',
            data: ['10月', '11月', '12月','1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        // {
        //     type: 'value',
        //     name: '水量',
        //     min: 0,
        //     max: 250,
        //     interval: 50,
        //     axisLabel: {
        //         formatter: '{value} ml'
        //     }
        // },
        // {
        //     type: 'value',
        //     name: '温度',
        //     min: 0,
        //     max: 25,
        //     interval: 5,
        //     axisLabel: {
        //         formatter: '{value} °C'
        //     }
        // }
       {
      type: 'value'
    }
    ],
    series: [
        {
            name: '管理人员',
            type: 'bar',
            stack: 'one',
            barWidth: 20,
            data: [220,700, 855, 420,220,700, 855, 420,220,700, 855, 420]
        },
        {
            name: '劳务人员',
            type: 'bar',
            stack: 'one',
            barWidth: 20,
            data: [260,760, 965, 510,260,760, 965, 510,260,760, 965, 510]
        }
    ]
};

const option3 = {
  color: ['#59B0E7', '#C4C4C4'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['当期支付', '累计支付']
  },
  grid: {
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: monthData
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '当期支付',
      type: 'bar',
      stack: 'one',
      barWidth: 20,
      data: [260,760, 965, 510]
    },
    
    {
      name: '累计支付',
      type: 'line',
      data: [270, 770, 800, 1364]
    }
  ]
}
import Echart from '@/components/echarts/index.vue'
export default {
  data() {
    return {
      teamGroup: [
        {
          groupName: '施工班组名称',
          laborName: '劳务单位名称劳务单位名称',
          reported: '未上报',
          time: ''
        },
        {
          groupName: '施工班组名称',
          laborName: '劳务单位名称劳务单位名称',
          reported: '已上报',
          time: '03-22'
        },
        {
          groupName: '施工班组名称',
          laborName: '劳务单位名称劳务单位名称',
          reported: '已上报',
          time: '03-22'
        },
        {
          groupName: '施工班组名称',
          laborName: '劳务单位名称劳务单位名称',
          reported: '未上报',
          time: ''
        },
        {
          groupName: '施工班组名称',
          laborName: '劳务单位名称劳务单位名称',
          reported: '已上报',
          time: '03-22'
        },
        {
          groupName: '施工班组名称',
          laborName: '劳务单位名称劳务单位名称',
          reported: '已上报',
          time: '03-22'
        },
          {
          groupName: '施工班组名称',
          laborName: '劳务单位名称劳务单位名称',
          reported: '未上报',
          time: ''
        },
        {
          groupName: '施工班组名称',
          laborName: '劳务单位名称劳务单位名称',
          reported: '已上报',
          time: '03-22'
        },
        {
          groupName: '施工班组名称',
          laborName: '劳务单位名称劳务单位名称',
          reported: '已上报',
          time: '03-22'
        }
        
      ],
      value: 'a',
      echartObj: option,
      echartObj2: option2,
      echartObj3: option3,
      attendance: [
        {
          ranking: 1,
          name: '工专路一号店',
          proportion: '64.3%'
        },
        {
          ranking: 2,
          name: '工专路二号店',
          proportion: '49.2%'
        },
        {
          ranking: 3,
          name: '工专路三号店',
          proportion: '49.2%'
        },
        {
          ranking: 4,
          name: '工专路四号店',
          proportion: '49.2%'
        },
        {
          ranking: 5,
          name: '工专路五号店',
          proportion: '49.2%'
        },
        {
          ranking: 6,
          name: '工专路六号店',
          proportion: '49.2%'
        },
        {
          ranking: 7,
          name: '工专路七号店',
          proportion: '49.2%'
        },
        {
          ranking: 8,
          name: '工专路八号店',
          proportion: '49.2%'
        }
      ]
    }
  },
  components: {
    Echart
  },
  methods: {
    onChange(e) {
      console.log(`checked = ${e.target.value}`)
    }
  }
}
</script>

<style scoped>
.workbench{
  width: 100%;
}
.top_content {
  background: #fff;
  width: 24%;
  padding: 18px;
  color: #999;
}
.top_right div {
  width: 100px;
  text-align: center;
}
.top_right div:nth-of-type(2) {
  font-size: 25px;
  color: black;
}
.top,
.center {
  margin-bottom: 20px;
  width: 100%;
}
.center_title,
.echartsTitle {
  padding: 15px 20px;
}

.center_left {
  width: calc(70% - 20px);
  margin-right: 20px;
  background: #fff;
}
.center_right {
  width: 30%;
  background: #fff;
}
.right_content {
  padding: 25px;
}
.payState,
.register {
  color: #999;
  width: 150px;
  text-align: center;
}
.register {
  width: calc(50% - 1px);
  padding: 0px 0;
  text-align: center;
}
.flexBetween .register:nth-of-type(1) {
  border-right: 1px solid #e8e8e8;
}
.blue {
  color: #1890ff;
}
.acard {
  height: 209px;
  overflow-y: auto;
}
.acard::-webkit-scrollbar {
  width:7px;
  height: 7px;
  /**/
}
.acard::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
.acard::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.notreported {
  color: red;
}
.reported {
  color: #1890ff;
}
::v-deep .ant-card-bordered {
  border: none;
  border-top: 1px solid #e8e8e8;
}
/* ::v-deep .ant-card-grid {
  box-shadow: 0px 0 0 0 #e8e8e8, 0 0px 0 0 #e8e8e8, 0px 0px 0 0 #e8e8e8, 1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}
::v-deep .ant-card-grid-hoverable:hover {
  -webkit-box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
} */
.echarts {
  background: #fff;
  width: 100%;
}
.echartsTitle {
  font-size: 16px;
  color: #000;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}
.echarts_1 {
  width: 100%;
  height: 300px;
  /* margin: 0 auto; */
}
.echarts_1_title {
  font-weight: 600;
  font-size: 18px;
  margin-left: 30px;
  color: black;
}
.echarts_2 {
  width: calc(65% - 40px);
  margin-right: 20px;
  height: 270px;
}
.echart2-right {
  width: 35%;
  height: 270px;
  padding-left: 40px;
  overflow-y: scroll;
}
.echart2-right::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /**/
}
.echart2-right::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
.echart2-right::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.ranking,.rangTop{
  text-align: center;
  width: 20px;
  height: 20px;
  background: #F0F2F5;
  border-radius: 10px;
  color: #000;
}
.rankTop{
  background: #314659;
  color: #fff;
}
</style>